<template>
  <div class="setting-container">
    <el-card class="box-card" style="position: relative;">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>个人设置</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 表单 -->
      <div class="admin-setting">
        <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="编号:">
          <span>{{ baseInfo.id }}</span>
        </el-form-item>
        <el-form-item label="手机号:">
          <span>{{ baseInfo.mobile }}</span>
        </el-form-item>
        <el-form-item label="媒体名称:" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="媒体介绍" prop="intro">
          <el-input type="textarea" v-model="ruleForm.intro"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateUserData('ruleForm')">保存设置</el-button>
        </el-form-item>
      </el-form>
       <!-- 图片 -->
      <div class="admin-image">
        <label for="selectFile">
          <el-image
          style="width: 150px; height: 150px"
          :src="baseInfo.photo">
        </el-image>
        </label>
        <input ref="file" @change="changeFile" type="file" style="display:none" id="selectFile">
        <p class="changedvator">修改头像</p>
      </div>
      </div>
    </el-card>

    <el-dialog
      title="修改头像"
      :visible.sync="dialogVisibleFile"
      width="30%"
      @opened ="dialogOpened"
      @close="dialogClosed"
      append-to-body>
      <div>
        <img :src="previewImage" ref="image" style="width:100%;height:100%" alt="">
      </div>
      <!-- <image>
      </image> -->
      <span slot="footer" class="dialog-footer">
        <el-button   @click="dialogVisibleFile = false">取 消</el-button>
        <el-button type="primary" @click="onUploadPhoto">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css';
import { updateUserPhoto , getUserInfo , updateUserInfo} from '@/api/setting/setting.js'
import globalBus from '@/utils/global-bus.js'
export default {
  name: "SettingsIndex",
  data() {
    return {
      ruleForm: {
        name: "",
        intro: "",
        email:'',
      },
      previewImage:'',
      dialogVisibleFile: false,
      baseInfo: {},
      cropper:null,
      rules: {
        name: [
          { required: true, message: "请输入媒体名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 5 到 8 个字符", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { pattern:/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/, message: '邮箱格式错误', trigger:"blur"},
        ],
        intro: [{ required: true, message: "请填写媒体介绍", trigger: "blur" }],
      },
    };
  },

  mounted() {
    this.getUserInfoData()
  },
  methods: {
    changeFile (value){
      // 处于图片预览

      const file = this.$refs.file
      console.log(file.files[0]);
      this.previewImage = window.URL.createObjectURL(file.files[0])
      console.log(this.previewImage);

      // 弹出层
      this.dialogVisibleFile = true


      
      this.$refs.file.value = ''

    },
    dialogOpened (){
      const image = this.$refs.image;
      if (this.cropper){
        this.cropper.replace(this.previewImage)
        return 
      }
        this.cropper = new Cropper(image, {
        viewMode: 1,
        dragMode: 'none',
        aspectRatio: 1,
        cropBoxResizable: false
     });
    },
    dialogClosed (){
      // this.cropper.destroyed() 
    },
    onUploadPhoto (){
      // 获取图片裁切对象
      // 请求更新用户头像
      this.cropper.getCroppedCanvas().toBlob(async (blob) => {
        const fd = new FormData()
        fd.append('photo',blob)
        const updateRes = await updateUserPhoto(fd)
        console.log(fd);
        if(updateRes.message === "OK"){
          this.$message.success('修改成功')
          this.dialogVisibleFile = false
          this.getUserInfoData()
          // console.log(this.baseInfo)
          // 发布通知，用户信息已修改
          globalBus.$emit('update-user',updateRes)
        }
      })
    },
    // 获取用户信息

    async getUserInfoData (){
      const userInfoRes = await getUserInfo()
      this.baseInfo = userInfoRes.data
      this.ruleForm.name = userInfoRes.data.name
      this.ruleForm.intro = userInfoRes.data.intro
      this.ruleForm.email = userInfoRes.data.email
      // console.log(userInfoRes);
    },
    // 更新用户信息
    updateUserData (){
      this.$refs.ruleForm.validate( async valid =>{
        if (valid){
          const updateRes = await updateUserInfo(this.ruleForm)
          if(updateRes.message === "OK"){
            this.$message.success('保存成功')
            this.getUserInfoData()
          }
        }else {
          return false
        }
      })
    }
  },
};
</script>

<style lang="less" scoped>
.admin-setting{
  display: flex;
  justify-content: space-between;
  .el-form{
    width: 50%;
}
  .admin-image{
    margin-top: 40px;
    margin-right: 100px;
  }
  .changedvator{
    text-align: center;
    cursor: pointer;
  }
}

</style>